<!--
 * @Author: 蔡亚风
 * @Date: 2022-04-15 15:10:38
 * @LastEditTime: 2022-04-22 16:11:03
 * @LastEditors: 蔡亚风
 * @Description: 
 * @FilePath: \prod\src\App.vue
-->
<template>
  <div id="app">
    <button @click="tab = 'defualt'">普通</button>
    <button @click="tab = 'face'">人脸</button>
    <div class="test1" v-if="tab === 'defualt'">
      <div class="videoBox">
        <recorder-video ref="recorderVideo" :facingMode="facingMode" :maskImg="maskSrc" />
      </div>
      <button @click="startRecorder()">开始录像</button>
      <button @click="stopRecorder()">结束录像</button>
      <button @click="catchPic()">抓图</button>
      <button @click="changeCamera()">变换摄像头</button>
      <button @click="changeMask()">打开/关闭遮罩层</button>
      <div class="preview">
        <video v-show="videoSrc" :src="videoSrc" autoplay loop></video>
        <img v-show="imgSrc" :src="imgSrc" alt="" />
      </div>
    </div>

    <div class="test2 videoBox" v-if="tab === 'face'">
      <tracking-face @getTrackingFace="getTrackingFace" />
      <div class="preview">
        <img v-show="imgSrc" :src="imgSrc" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import RecorderVideo from "./components/RecorderVideo.vue";
import TrackingFace from "./components/TrackingFace.vue";
export default {
  name: "App",
  components: {
    RecorderVideo,
    TrackingFace,
  },
  data() {
    return {
      tab: "defualt", //defualt 普通  face 人脸
      maskSrc: "",
      videoSrc: "",
      imgSrc: "",
      facingMode: "user",
    };
  },
  methods: {
    //开始录像
    async startRecorder() {
      const status = await this.$refs.recorderVideo.startRecording();
      console.log(status);
    },
    //结束录像
    async stopRecorder() {
      const videoSrc = await this.$refs.recorderVideo.stopAndblobDownload();
      this.videoSrc = videoSrc;
    },
    //抓图
    async catchPic() {
      const picBase64 = await this.$refs.recorderVideo.cathcPic();
      this.imgSrc = picBase64;
    },
    //变换前后置
    changeCamera() {
      this.facingMode = this.facingMode === "user" ? "environment" : "user";
    },
    //遮罩层的开启关闭
    changeMask() {
      this.maskSrc = this.maskSrc === "" ? require("./assets/face.png") : "";
    },
    //获取人脸识别图
    getTrackingFace(picBase64) {
      this.imgSrc = picBase64;
    },
  },
};
</script>

<style scoped>
.videoBox {
  width: 640px;
  height: 360px;
}
.preview {
  display: flex;
}
.preview video {
  width: 640px;
  height: 360px;
  border: 4px solid green;
}
.preview img {
  width: 640px;
  height: 360px;
  border: 4px solid yellow;
}
.test1,
.test2 {
  margin-bottom: 10px;
  border: 1px solid red;
}
</style>
